<template>
  <main>
    <div class="index-wrapper">
      <div class="goods-list">
        <div class="components-container"
             style="background: transparent; --vertical_margin: 16px; --transverse_margin: 0px;"
        >

          <div class="container-body">
            <div class="body-container" style="--spacing: 16px; --goods-border-radius: 4px; --goods-image-style: contain; --lines: 0;">
              <div class="body-container-swiper"></div>
              <div class="body-container-grid">
                <div v-for="(item,index) in specialList" :key="item.path" class="goods-item no-border-white"
                     style="flex-direction: column; --title-align: left; --flex-align: flex-start;"
                >
                    <div class="goods-item-img-container">
                      <div class="image-box" style="padding-top:56.25%;width:100%;">
                        <nuxt-link :to="'/special/'+item.path" :title="item.title" >
                          <img
                              v-lazy="item.img"
                              class="goods-img top-image" >
                          <div class="type-label-box">
                            <div class="type-label">
                              {{item.categoryName}}
                            </div>
                          </div>
                        </nuxt-link>
                      </div>
                    </div>
                    <div class="goods-card-container-info goods-card-container-vertical">
                      <div class="content-box">
                        <div class="title-box two-line-hidden" style="font-weight:600;">
                          <nuxt-link :to="'/special/'+item.path" :title="item.title" >{{item.title}}</nuxt-link>
                        </div>
                        <div class="description-box ET5 c9999 EC14 one-line-hidden MT-4">
                          <nuxt-link :to="'/special/'+item.path" :title="item.title" >{{item.description || "暂无"}}</nuxt-link>
                        </div>
                      </div>
                      <div class="social-btn-group mt5">
                        <nuxt-link :to="'/special/'+item.path" class="flex align-center" :title="item.title" :alt="item.title">
                            <span class="classify" v-if="item.specialtype==1">
                                  基础课
                                </span>
                          <span class="classify" v-if="item.specialtype==2">
                                  进阶课
                                </span>
                          <span class="classify" v-if="item.specialtype==3">
                                  实战课程
                                </span>
                          <span class="classify" v-if="item.specialtype==4">
                                  面试课
                            </span>
                          <span class="pr tp3 fz14 fb">
                              <span class="praise social-btn ml3">
                                <span class="iconfont icon-eye">
                                </span>
                                <span class="count">
                                  {{item.viewcount||0}}
                                </span>
                              </span>
                             <span class="like social-btn ml5">
                                <span class="iconfont icon-shoucang">
                                </span>
                                <span class="count">
                                  {{item.favNum||0}}
                                </span>
                              </span>
                            </span>
                        </nuxt-link>
                      </div>
                      <div class="temp-item-owner mt15 mb5 flex justify-content-between align-items">
                        <nuxt-link  class="flex align-items"  to="javascript:void(0);">
                          <img v-lazy="item.avatar" :alt="item.nickname">
                          <span class="owner-name pr tp1">
                              {{item.nickname}}
                            </span>
                        </nuxt-link>
                        <div class="flex align-items" style="justify-content: flex-end;flex:1">
                          <nuxt-link  @click.prevent="handleSpecialCancel(item.path,index)" :title="item.title">
                            <n-button size="small">
                              <n-icon><EyeOutline></EyeOutline></n-icon>
                              <span class="px-1">取消点赞</span>
                            </n-button>
                          </nuxt-link>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="py-[60px] flex justify-center" style="width: 100%" v-if="total==0">
      <k-empty :show="total==0" url="/" btnmsg="点击前往学习课程"></k-empty>
    </div>
    <div class="mt-6"  v-if="total > pageSize">
      <n-pagination v-model:page="pageNo"
                    v-model:page-size="pageSize"
                    :display-order="['pages', 'quick-jumper', 'size-picker']"
                    show-quick-jumper
                    show-size-picker
                    :item-count="total"
                    :page-sizes="pageSizesList"
                    :on-update:page="handleLoadPage"
                    :on-update:page-size="handleLoadPageSize"
      />
    </div>
    <k-loading :show="loadingFlag"></k-loading>
  </main>
</template>
<script setup>

const pageNo = ref(1)
const pageSize = ref(15)
const total = ref(0)
const pages = ref(0)
const specialList = ref([])
const loadingFlag = ref(false)
const emits = defineEmits(["success"])
// 分页显示的列表
const pageSizesList = ref([
  {
    label: '15 每页',
    value: 15
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 45
  }
])

// 加载用户发布的课程
const handleLoadSpecialData = async () => {
  loadingFlag.value = true
  const resp = await useFindSpecialUserLikePageApi({
    "pageNo": pageNo.value,
    "pageSize": pageSize.value
  })
  specialList.value = resp.data.records
  total.value = resp.data.total
  pages.value = resp.data.pages
  loadingFlag.value = false
  emits("success",total.value)
}

// 点击分页执行的回调方法
const handleLoadPage = (pno) => {
  pageNo.value = pno
  handleLoadSpecialData()
  document.documentElement.scrollTop = 0
}

// 点击分页size列表的回调方法
const handleLoadPageSize = (psize) => {
  pageNo.value = 1
  pageSize.value = psize
  handleLoadSpecialData()
  document.documentElement.scrollTop = 0
}



//取消点赞
const  handleSpecialCancel = (id,index) => {
  useDialog().warning({
    content: "你确定要【取消点赞】此课程吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: async () => {
      try {
        // 退出逻辑
        await useCanceLikeSpecialApi(id)
        specialList.value.splice(index,1)
        total.value --
        emits("success",total.value)
        if(specialList.value.length == 0) {
          pageNo.value = 1
          handleLoadSpecialData()
        }
      }catch (e) {
        useMessage().error(e.message)
      }
    },
  });
}


onMounted(() => {
  // 加载用户发布的课程
  handleLoadSpecialData()
})

</script>
